<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////--> 
    <link rel='stylesheet' id='camera-css'  href='/mcouponMgr/css/camera.css' type='text/css' media='all'> 
    


    <title>jQuery Mobile Web App</title>
    <link href="/mcouponMgr/css/maokong.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <link rel="stylesheet"  href="/mcouponMgr/css/jquery.mobile.structure.css" />
    <link rel="stylesheet" href="/mcouponMgr/css/jquery.mobile.theme.css" />
  
    <script>
      var userAgent = navigator.userAgent + '';
      if (userAgent.indexOf('iPhone') > -1) {
        document.write('<script src="/mcouponMgr/js/lib/cordova-iphone.js"></sc' + 'ript>');
        var mobile_system = 'iphone';
      } else if (userAgent.indexOf('Android') > -1) {
        document.write('<script src="/mcouponMgr/js/lib/cordova-android.js"></sc' + 'ript>');
        var mobile_system = 'android';
      } else {
        var mobile_system = '';
      }
    </script>
  
    <script src="/mcouponMgr/js/lib/jquery.js"></script>
    <!-- your scripts here -->
    <script src="/mcouponMgr/js/app/app.js"></script>
    <script src="/mcouponMgr/js/app/bootstrap.js"></script>
    <script src="/mcouponMgr/js/lib/jquery.mobile.js"></script>
    <script type='text/javascript' src='/mcouponMgr/scripts/camera.min.js'></script> 
    <script src="/mcouponMgr/js/jquery.easing.1.3.js"></script>
    <script>
	  function onDeviceReady() {
	    console.log("We got device ready");
	    cordova.exec(null, null, "SplashScreen", "hide", []);
	  }
	  // Soon to be
	  // navigator.splashscreen.hide();
	</script>
    <script>
      jQuery(function(){
	    jQuery('#camera_wrap_2').camera({
	      height: '400px',
		  loader: 'bar',
		  pagination: true,
		  thumbnails: true
	    });
	  });
	</script>
  </head>
  <body>
    <style type="text/css">
	  .camera_next { display:none;}
	  .camera_commands { display:none;}
	  .camera_prev { display:none;}
      .ui-page {
        background-image: url(/mcouponMgr/images/home_bg.jpg);
        background-repeat: repeat-x;
      }
      .ui-footer {
      }
  
      .title {
        margin: 0px;
        padding: 0px;
        width: 100%;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-top-style: 0;
        border-right-style: 0;
        border-bottom-style: 0;
        border-left-style: 0;
        background-image: url(/mcouponMgr/images/bar_store.JPG);
      }
     </style>
     
    <div data-role="page" data-add-back-btn="true" data-back-btn-text="上一頁" data-back-btn-theme="e" id="page4">
    <div data-role="header" class="title" data-theme="a" data-position="fixed">
    <?php foreach($promodetails as $promodetail):?>
    <h1><img src="/mcouponMgr/images/7-11.jpg"><?php echo $promodetail['A']['title'];?></h1>
    
    <div data-role="navbar" >
      <ul data-content-theme="e">
          <li><a href="/mcouponMgr/Stores/storeList/1"><img id="storeImg" src="/mcouponMgr/images/M_store2.png"/></a></li>
          <li><a href="/mcouponMgr/Promos/promoList/1"><img id="bonusImg" src="/mcouponMgr/images/M_bonus2.png"/></a></li>
          <li><a href="#contacts"><img src="/mcouponMgr/images/M_record2.png"/></a></li>
          <li><a href="#events"><img src="/mcouponMgr/images/M_favorite2.png" /></a></li>
      </ul>
    </div>
    <div data-role="navbar">
      <ul>  
        <li><a <?php if($tid==1){echo "class='ui-btn-active ui-state-persist'";}?> href="/mcouponMgr/Stores/storeList/1" data-theme="c">飲食</a>
        <li><a <?php if($tid==2){echo "class='ui-btn-active ui-state-persist'";}?> href="/mcouponMgr/Stores/storeList/2" data-theme="c">用餐</a>
        <li><a <?php if($tid==3){echo "class='ui-btn-active ui-state-persist'";}?> href="/mcouponMgr/Stores/storeList/3" data-theme="c">購物</a>
        <li><a <?php if($tid==4){echo "class='ui-btn-active ui-state-persist'";}?> href="/mcouponMgr/Stores/storeList/4" data-theme="c">咖啡</a>
        <li><a <?php if($tid>=5){echo "class='ui-btn-active ui-state-persist'";}?> href="/mcouponMgr/Stores/storeList/5" data-theme="c">附近店家</a>
      </ul>
    <script>

	var ajaxQueryStoresString='';
	function ajaxQueryStores(data)
	{
		ajaxQueryStoresString='';
		var storeId='';
		for(var i=0;i<data.length;i++)
		{
			if(storeId!=data[i].Store.id)
			{
				if(i==0)
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="false">'
;
				}
				else
				{
			ajaxQueryStoresString+=
'        <div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
;
				}
			ajaxQueryStoresString+=
'    <h3>  <div  style="float:left"> <img src="/mcouponMgr/images/7-11.jpg"> </div>                            '
		+'          <div>                                                              '
		+'          <div >'+data[i].Store.name+'  '+data[i].Store.tel+'</div>                                       '
		+'          <div>'+data[i].Store.addr+'</div>'
		+'          <div>156&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公尺</div>                   '
		+'        </div>                                                               '
		+'          </h3>                                                               '
+'   <p>                                             ';
		for(var j=0;j<data[i].Promo.length;j++)
		{
			ajaxQueryStoresString+=
			'<div data-role="collapsible" style="white-space:normal" data-content-theme="c" data-collapsed="true">'
			+"<h2><span style='color:red'>"
			+""+data[i].Promo[j].title+""
			+"</span></h2><p/>"
			+"<li>"+data[i].Promo[j].content+"</li>"
			+"<li>"+data[i].Promo[j].needPoints+"</li>"
		+'        </div>                                                               '
			;
		}
			ajaxQueryStoresString+='	   </p>                                                                                                  '
+'</div>                                                                                                        '
;
		}
			storeId=data[i].Store.id;
			}
			
	}
  $( '#page2' ).live( 'pagecreate',function(event){
   $("#bonusImg").live('click',(function(e) {
	  //$.mobile.pageLoading();     
$.mobile.showPageLoadingMsg();
jQuery.ajax({
                url: 'http://localhost/mcouponMgr/stores/ajaxQueryStores.json',
                type: 'post',
                data: {
                    method: 'set_user_prizes'
                },
                dataType: 'jsonp',
                jsonp: true,
                jsonpCallbackString: ajaxQueryStores,
                complete: function(jqXHR){
                    if(jqXHR.status==200)
					{
						($("#page2Content").html(ajaxQueryStoresString)).trigger('create');
					}
					else
					{
						($("#page2Content").html(' <li>無法連線server，請稍後再試')).trigger('create');
						
					}
					$.mobile.hidePageLoadingMsg();

					
                }
				

});
//$.mobile.pageLoading(true);     
	}));
});

</script>
      </div>
    </div>
     
    <div data-role="content">
      <div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
      
    <?php if($promodetail['B']['pic1']){?>
      <div data-thumb="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic1']?>" data-src="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic1']?>"></div>
    <?php }?> 
    <?php if($promodetail['B']['pic2']){?>
      <div data-thumb="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic2']?>" data-src="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic2']?>"></div>
    <?php }?> 
    <?php if($promodetail['B']['pic3']){?>
      <div data-thumb="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic3']?>" data-src="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic3']?>"></div>
    <?php }?> 
    <?php if($promodetail['B']['pic4']){?>
      <div data-thumb="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic4']?>" data-src="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic4']?>"></div>
    <?php }?> 
    <?php if($promodetail['B']['pic5']){?>
      <div data-thumb="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic5']?>" data-src="<?php echo "/mcouponMgr/files/store/".$promodetail['B']['pic5']?>"></div>
    <?php }?> 
       <!-- <div data-thumb="/mcouponMgr/images/mou_1_2.jpg" data-src="/mcouponMgr/images/mou_1_1.jpg">
           <div class="camera_caption fadeFromBottom">
             <em>貓空大優惠1</em> 買一送一
           </div>
        </div>
        <div data-thumb="/mcouponMgr/images/mou_2_2.jpg" data-src="/mcouponMgr/images/mou_2_1.jpg">
           <div class="camera_caption fadeFromBottom">
             <em>貓空大優惠2</em> 買一送一
           </div>
        </div>
        <div data-thumb="/mcouponMgr/images/mou_3_2.jpg" data-src="/mcouponMgr/images/mou_3_1.jpg">
           <div class="camera_caption fadeFromBottom">
              <em>貓空大優惠3</em> 買一送一
           </div>
        </div>-->
      </div><!-- #camera_wrap_2 -->
    </div><!-- .fluid_container -->
    <?php 
    $EARTH_RADIUS = 6378.137;
    $lat1 = 24.966067;
    $lng1 = 121.5830;
    $lat2 = $promodetail['B']['latitude'];
    $lng2 = $promodetail['B']['longitude'];
    $radLat1 = $lat1 * pi() / 180.0;
    $radLat2 = $lat2 * pi() / 180.0;
    $c = $radLat1 - $radLat2;
    $radLng1 = $lng1 * pi() / 180.0;
    $radLng2 = $lng2 * pi() / 180.0;
    $b = ($lng1 * pi() / 180.0) - ($lng2 * pi() / 180.0);
    $s = 2 * asin(sqrt(pow(sin($c / 2), 2) + cos($radLat1) * cos($radLat2) * pow(sin($b / 2), 2)));
    $s = $s * $EARTH_RADIUS;
    $s = round($s * 10000) / 10000;
    
    ?>
    <div data-role="footer" data-position="fixed">
      <h1><img id="smallimg" src="/mcouponMgr/files/store/<?php echo $promodetail['B']['logo_path'];?>">　<?php echo $promodetail['B']['name']."　(".$promodetail['B']['tel_area'].") ".$promodetail['B']['tel']."　". $promodetail['B']['addr']."　　".$s*1000;?> 公尺</h1>
    </div>
    </div>
    <?php endforeach;?>
</body>
  </html>
